<template>
  <view style="position: relative" :style="{ height: `${height}rpx` }">
    <scroll-view
      class="scroll-viewer"
      scroll-y="true"
      :style="{ height: height + 'rpx' }"
      @scroll="scroll"
    >
      <view>
        <slot></slot>
      </view>
    </scroll-view>
    <view class="scrollbar" v-if="showBar">
      <view class="bar" :style="{ top: scrollbarTop }"></view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, ref } from "vue";

const props = defineProps({
  height: {
    type: [String, Number],
    default: 600,
  },
  showBar: {
    type: Boolean,
    default: true,
  },
});

const scrollbarTop = ref(0);

const scroll = (e) => {
  // {"scrollLeft":0,"scrollTop":5,"scrollHeight":1200,"scrollWidth":375,"deltaX":null,"deltaY":null}
  let maxScrollLen = e.detail.scrollHeight - uni.upx2px(props.height);
  let barScrollLen = uni.upx2px(props.height) - 50;
  let x = (e.detail.scrollTop * barScrollLen) / maxScrollLen;
  // if (x < 15) x = 0
  // if ((props.height - x) < 15) x = 0
  scrollbarTop.value = x.toFixed(2) + "px";
};
</script>

<style lang="less" scoped>
.scroll-viewer {
  overflow: hidden;
}
.scrollbar {
  position: absolute;
  width: 8px;
  height: 100%;
  right: 0;
  top: 0;
  overflow: hidden;
  background: rgba(0, 7, 100, 0.87);
  border-radius: 12px;
  z-index: 99;
  .bar {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: 1px solid rgba(0, 7, 100, 0.87);
    background: #ffd800;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
